<template>
  <view>
    <!-- 分类 -->
    <z-tabs
      ref="tabRef"
      :list="categoryData"
      :current="activeIdx"
      name-key="name"
      value-key="id"
      :scroll-count="1"
      :active-style="{ fontSize: '30rpx', marginLeft: '20rpx', marginRight: '20rpx', fontWeight: 800 }"
      :inactive-style="{ fontSize: '30rpx', marginLeft: '20rpx', marginRight: '20rpx' }"
      :bar-width="50"
      :bar-height="6"
      :bottom-space="0"
      :active-color="config.theme.color"
      :tabs-style="{ padding: '0 15rpx', height: '80rpx' }"
      bg-color="#fff"
      @change="changeTab"
    ></z-tabs>

    <z-paging
      ref="paging"
      v-model="goodsList"
      :default-page-size="limit"
      :use-page-scroll="true"
      :to-bottom-loading-more-enabled="true"
      :auto="false"
      :fixed="false"
      :min-delay="600"
      :show-loading-more-no-more-view="false"
      :refresher-enabled="false"
      :auto-hide-loading-after-first-loaded="false"
      @query="getData"
    >
      <view class="data-box">
        <view class="flex flex-wrap justify-between">
          <view
            class="goods-box"
            v-for="(item, idx) in goodsList"
            :key="idx"
            @click="nav.jump('/pages/goods/detail?id=' + item.id)"
          >
            <view class="img-zone">
              <image class="goods-logo" mode="aspectFill" :src="item.goods_logo"></image>
            </view>

            <view class="text-zone">
              <view class="goods-title line-2">{{ item.goods_name }}</view>
              <view class="flex justify-between items-baseline">
                <mt-format-money
                  class="sales-price"
                  :money="item.goods_specs[0].goods_price.toFixed(2)"
                ></mt-format-money>
                <view class="mr-5 mt-12rpx" v-if="parseFloat(item.goods_specs[0].market_price) > 0">
                  <text class="market-price">
                    {{ parseFloat(item.goods_specs[0]?.market_price).toFixed(2) }}
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <template #loading>
        <view class="flex items-center justify-center h-500rpx">
          <mt-logo-loading :size="88"></mt-logo-loading>
        </view>
      </template>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
  import mtFormatMoney from '@/components/mt-format/mt-format-money.vue';
  import MtLogoLoading from '@/components/mt-loading/mt-logo-loading.vue';
  import { ref } from 'vue';
  import { report } from '@/utils/exception';
  import { getGoodsCategory as getCategoryDataApi, getGoodsList as getDataApi } from '@/api/goods/index';
  import { onReachBottom } from '@dcloudio/uni-app';
  import { config } from '@/config/env';
  import { nav } from '@/utils/homer';
  import type { CategoryList } from '@/types/base';

  const tabRef = ref();
  const categoryData = ref<CategoryList[]>([]);
  const activeIdx = ref<number>(0);
  const goodsList = ref<any[]>([]);
  const limit = 20;
  const paging = ref();

  const getData = (pageNo: number, pageSize: number) => {
    getDataApi(pageNo, pageSize, categoryData.value[activeIdx.value].id)
      .then((res) => {
        paging.value.complete(res.data.list);
      })
      .catch((err) => {
        report(err);
        paging.value.complete(false);
      });
    // const list: any[] = [];
    // setTimeout(() => {
    //   for (let i = 0; i < 20; i++) {
    //     list.push({
    //       // goods_specs[0].sales_price
    //       goods_logo: 'https://assets.kaola.qichangsheng.com/a93ff957b48a8767e6060bfd9fd20e2d.jpg',
    //       goods_name: '牛奶',
    //       goods_specs: [{ sales_price: '0.1' }],
    //     });
    //   }
    //   paging.value.complete(list);
    // }, 1000);
  };

  const getCategoryData = () => {
    getCategoryDataApi()
      .then((res) => {
        categoryData.value = res.data.list;
        if (categoryData.value.length > 0) {
          paging.value.reload();
        }
      })
      .catch((err) => {
        report(err);
      });
  };
  getCategoryData();

  const changeTab = (index: number) => {
    activeIdx.value = index;
    paging.value.reload();
  };

  onReachBottom(() => {
    paging.value.doLoadMore();
  });
</script>

<style lang="scss" scoped>
  .data-box {
    display: flex;
    flex-direction: column;
    margin: 25rpx 20rpx 20rpx 20rpx;

    .goods-box {
      display: flex;
      flex-direction: column;
      background: white;
      width: 346rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
      border-radius: 15rpx;

      .img-zone {
        .goods-logo {
          height: 346rpx;
          width: 100%;
        }
      }

      .text-zone {
        padding: 16rpx 15rpx;

        .goods-title {
          font-size: 26rpx;
          margin-bottom: 8rpx;
          line-height: 35rpx;
          letter-spacing: 1rpx;
          height: 70rpx;
        }

        .sales-price {
          color: $themeColor;
          font-size: 35rpx;
          font-weight: 600;

          &::before {
            content: '￥';
            font-size: 22rpx;
            font-weight: 600;
          }
        }

        .market-price {
          color: gray;
          text-decoration: line-through;
          font-size: 22rpx;
          &::before {
            content: '￥';
          }
        }
      }
    }
  }
</style>
